https://cloud.tencent.com/developer/article/1499135
<style>
    .container {
      width: 300px;
      margin: 50px auto;
      padding: 10px;
      border: 1px solid #ddd;
    }
    
    .nav-box {
      font-size: 0;
    }
    
    button {
      width: 150px;
      height: 40px;
      box-sizing: border-box;
      outline: none;
      background: #fff;
      border: 1px solid #ddd;
      font-size: 18px;
      cursor: pointer;
    }
    
    button:focus-within {
      color: #fff;
      background: #ff7300;
    }
    
    .content-box {
      font-size: 24px;
      border: 1px solid #ddd;
      height: 100px;
    }
    .content-box div {
      display: none;
    }
    
    .nav-box:not(:focus-within) .nav1 {
      color: #fff;
      background: #ff7300;
    }
    .nav-box:not(:focus-within) .content1 {
      display: block;
    }
    
    .nav1:focus-within ~ .content-box .content1 {
      display: block;
    }
    
    .nav2:focus-within ~ .content-box .content2 {
      display: block;
    }
    </style>
    <div class="container">
      <div class="nav-box">
        <button class="nav1">tab1</button>
        <button class="nav2">tab2</button>
        <div class="content-box">
          <div class="content1">
            content-1
          </div>
          <div class="content2">
            content-2
          </div>
        </div>
      </div>
    </div>